<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>角色管理</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/index.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <script src="js/token.js"></script>
    <style>
        .el-header {
            background-color: #545c64;
        }

        .header-img {
            width: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div id="div">
    <template>
        <div class="dept-box">
            <el-row>
                <el-col :span="24">
                    <div class="tool-box">
                        <el-button type="primary" icon="el-icon-circle-plus-outline" size="small"
                                   @click="openFormToAdd">新增
                        </el-button>
                    </div>
                </el-col>
            </el-row>
            <el-table :data="list" style="width: 100%">
                <el-table-column
                        prop="name"
                        label="角色名">
                </el-table-column>
                <el-table-column
                        prop="remark"
                        label="描述">
                </el-table-column>
                <el-table-column label="操作" fixed="right" width="300">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="primary"
                                plain
                                @click="openFormToUpdate(scope.$index, scope.row)">编辑
                        </el-button>
                        <el-button
                                size="mini"
                                type="primary"
                                plain
                                @click="openModuleFormToUpdate(scope.$index, scope.row)">权限
                        </el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="openToDelete(scope.$index, scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>


            <el-dialog :title="dialogTitle" width="600px" :visible.sync="formVisible" @close="closeForm('form')">
                <el-form :model="form" :rules="rules" ref="form">
                    <el-form-item label="名称" prop="name" label-width="80px">
                        <el-input v-model="form.name" autocomplete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="描述" prop="remark" label-width="80px">
                        <el-input v-model="form.remark" autocomplete="off"></el-input>
                    </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="formVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmForm('form')">确 定</el-button>
                </div>
            </el-dialog>

            <el-dialog title="编辑权限" width="600px" :visible.sync="moduleFormVisible">
                <el-tree :show-checkbox="true" :data="modules" :props="{label:'name'}" :expand-on-click-node="false"
                         ref="tree" node-key="moduleId"  default-expand-all></el-tree>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="moduleFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="confirmModuleForm()">确 定</el-button>
                </div>
            </el-dialog>
        </div>
    </template>
</div>
<script>
    let vue = new Vue({
        el: "#div",
        data: {
            list: [
                /*{name:"系统维护管理员",remark:"日常系统维护管理人员，账户异常处理，忘记密码重置等等"},
                {name:"题目审核员",remark:"负责题目审核，包括题干和选项"},
                {name:"题目录入员",remark:"负责题目录入"},
                {name:"超级管理员（慎用）",remark:"sysadmin123123，超级管理员，为系统最高权限"}*/
            ], /* 表示当前页数据 */
            page: 1, /* 表示页号 */
            total: 0, /* 总记录数 */
            backup: {}, /* 修改前保存 form 原始数据, 新增前用来恢复 */
            form: {
                roleId: '',
                name: ''
            }, /* 新增和修改表单数据, 必须和后台用来接收数据的 java bean 相对应, 并注意数据类型（日期在前台用字符串） */
            formVisible: false, /* 控制新增和修改表单可见性 */
            dialogTitle: '', /* 控制新增和修改表单标题 */
            rules: {
                name: [
                    {required: true, message: '请输入名称', trigger: 'blur'},
                    {min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur'}
                ]
            }, /* 表单校验规则 */
            /*编辑模块*/
            moduleFormVisible: false,
            currentRoleId: '',
            modules: [
                /*{
                    moduleId: "1",
                    name: "平台系统管理",
                    children: [
                        {moduleId: "101", name: "部门管理"},
                        {moduleId: "102", name: "用户管理"},
                        {moduleId: "103", name: "角色管理"}
                    ]
                },
                {
                    moduleId: "2",
                    name: "题库管理",
                    children: [
                        {moduleId: "201", name: "题目学科管理"},
                        {moduleId: "202", name: "题目类型管理"},
                        {moduleId: "203", name: "企业管理"}
                    ]
                }*/

            ]
        },
        mounted() {
            this.findAll();
            this.findAllModules();
        }, /* data 初始化操作 */
        methods: {
            findAllModules() {
                axios.get("moduleServlet?method=findAll")
                    .then((resp) => {
                        if (resp.data.flag) {
                            this.modules = resp.data.resultData;
                        } else {
                            this.$message.error(resp.data.message);
                        }
                    })
                    .catch(() => {
                        this.$message.error("请求错误!");
                    })
            },
            findAll() {
                axios.get("roleServlet?method=findAll")
                    .then((resp) => {
                        if (resp.data.flag) {
                            this.list = resp.data.resultData;
                        } else {
                            this.$message.success(resp.data.message);
                        }
                    })
                    .catch(() => {
                        this.$message.error("请求错误!");
                    })
            },
            delete(id) {
                axios.post("roleServlet?method=delete&id=" + id)
                    .then((resp) => {
                        if (resp.data.flag) {
                            this.$message.success("删除成功!");
                            this.findAll();
                        } else {
                            this.$message.error(resp.data.message);
                        }
                    }).catch(() => {
                    this.$message.error("请求失败!");
                })
            },
            add(formData) {
                axios.post("roleServlet?method=add", formData)
                    .then((resp) => {
                        if (resp.data.flag) {
                            this.$message.success("添加成功!");
                            this.findAll();
                        } else {
                            this.$message.error(resp.data.message);
                        }
                    }).catch(() => {
                    this.$message.error("请求失败!");
                })
            },
            update(formData) {
                axios.post("roleServlet?method=update", formData)
                    .then((resp) => {
                        if (resp.data.flag) {
                            this.$message.success("修改成功!");
                            this.findAll();
                        } else {
                            this.$message.error(resp.data.message);
                        }
                    }).catch(() => {
                    this.$message.error("请求失败!");
                })
            },
            dateToString(d) {
                return d.getFullYear() + "-" + (d.getMonth() + 1) + "-" + d.getDate()
            },
            openToDelete(index, row) {
                this.$confirm(`确定删除 【${row.name}】 吗?`, '提示', {
                    type: 'warning'
                }).then(() => {
                    this.delete(row.roleId);
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    })
                }).catch(() => {
                })
            },
            /*prepareFormData() {
                let formData = new FormData()
                for (let k in this.form) {
                    if (this.form.hasOwnProperty(k)) {
                        let v = this.form[k]
                        if (v != null) {
                            formData.append(k, v)
                        }
                    }
                }
                return formData
            },*/
            prepareFormData(formName) {
                let param = "";
                for (let property in formName) {
                    if (formName[property] != null) {
                        param += property + "=" + formName[property] + "&"
                    }
                }
                param = param.substring(0, param.length - 1);
                return param;
            },
            openFormToAdd() {
                this.dialogTitle = "新增"
                this.formVisible = true
                Object.assign(this.backup, this.form)
            },
            openFormToUpdate(index, row) {
                this.dialogTitle = "修改"
                this.formVisible = true
                Object.assign(this.backup, this.form)
                this.form = Object.assign({}, row)
            },
            confirmForm(formName) {
                this.$refs[formName].validate(valid => {
                    if (valid) {
                        let id = this.form.roleId
                        let formData = this.prepareFormData(this.form);
                        if (id) {
                            this.update(formData);
                        } else {
                            this.add(formData);
                        }
                        this.formVisible = false
                        this.$message({
                            type: 'success',
                            message: id ? '修改成功！' : '新增成功！'
                        })
                    }
                })
            },
            closeForm(formName) {
                this.$refs[formName].clearValidate()
                Object.assign(this.form, this.backup)
            },
            openModuleFormToUpdate(index, row) {
                this.moduleFormVisible = true
                this.currentRoleId = row.roleId
                axios.get("roleModuleServlet?method=findRoleIdByModule&roleId="+this.currentRoleId)
                    .then((resp)=>{
                        if (resp.data.flag){
                            let list11 = resp.data.resultData;
                                this.$refs.tree.setCheckedKeys(list11);
                        }
                    })
                    .catch(()=>{
                        this.$message.error("请求失败!");
                    })
            },
            confirmModuleForm() {
                let keys = this.$refs.tree.getCheckedKeys(true) // [101,102] 格式是 json格式
                axios.post("roleModuleServlet?method=updateRoleModule&roleId="+this.currentRoleId,keys)
                    .then((resp)=>{
                        if (resp.data.flag){
                            this.$message.success("修改成功!");
                        }else {
                            this.$message.error("修改失败!");
                        }
                    })
                    .catch(()=>{
                        this.$message.error("请求错误!");
                    })
                this.moduleFormVisible = false
            }
        }
    });
</script>

<style>
    .dept-box {
        width: 100%;
    }

    .dept-box .tool-box {
        padding: 10px 10px;
        border-bottom: 1px solid #eee;
    }

    .dept-box .el-pagination {
        margin-top: 20px;
    }
</style>
</body>
</html>
